<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div>******{{data.num1}}******</div>
    <div>******{{data.num2}}******</div>
    <div>******{{data.obj}}******</div>
    <button @click="back">回退</button>
  </div>
</template>
<script>
import { defineComponent,onMounted, reactive, ref, toRefs } from 'vue'
import {useRouter,useRoute} from 'vue-router'
export default defineComponent({
  setup() {
    let data = reactive({
      num1:'',
      num2:'',
      obj:{}
    })
       onMounted(()=>{
        // 组件挂载的过程
        // 数据dom...
        // 发请求
        // 数据初始化的操作 接受路由传递的参数
        data.num1 = route.query.num1 || route.params.num1
        data.num2 = route.query.num2 || route.params.num2
        const obj = route.query.obj || route.params.obj
        data.obj=obj?JSON.parse(obj):''
    })
    
    // router是全局路由对象
    const router = useRouter()
      console.log("全局路由对象==>",router);
    // route是当前路由对象
    const route = useRoute()
    // query传递过来点参数都是字符型的类型
    console.log("当前路由对象(query)==>",route.query);
    console.log("当前路由对象(params)==>",route.params);
    let back = () =>{
      //  push是一个函数,里面可以直接传入跳转的路径
        //back 回到上一月
        //forward:去到下一页
        //go(int) 正数代表前进,负数代表后退
        // router.back()
        router.go(-1)
    }
    return{
      back,
      data

    }
  },
})
</script>

